<template>
  <div class="container">
    <el-row class="top">
      <Chart :option="mapOption" style="width: 100%; height: 700px"></Chart>
    </el-row>
    <el-row class="chartContainer">
      <div class="left">
        <Card title="全市劳动力行业分布情况">
          <Chart :option="industryOption"></Chart>
        </Card>
      </div>
      <div class="right">
        <Card title="全市劳动力薪资分布情况">
          <Chart :option="salaryOptions"></Chart>
        </Card>
      </div>
    </el-row>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "CenterVeiw",
});
</script>
<script setup lang="ts">
import Card from "./card.vue";
import Chart from "./chart.vue";
import type { chartDataType } from "./chartType";
import { chartStore } from "@/stores/chartData";
import { ref, onMounted } from "vue";
import { colorHandler } from "./utils";
const chartData = chartStore();
const { industryData, salaryData, employData } = chartData;
//地图
const mapOption = {
  geo: {
    type: "map",
    map: "china",
    itemStyle: {
      areaColor: "rgba(43, 196, 243, 0.42)",
      borderColor: "rgba(43, 196, 243, 1)",
    },
    label: {
      color: "#fff",
    },
    emphasis: {
      itemStyle: {
        areaColor: "rgba(43, 196, 243)",
      },
      label: {
        color: "#fff",
      },
    },
  },

  tooltip: {
    show: true,
    enterable: true,
    position: [10, 10],
    // triggerOn: "click", // 点击触发

    padding: 10,

    formatter: function (params: any) {
      return `
              <ul class="map-tooltip">
                <li class="title">
             
                  <p class="province-name">${params.name}</p>
               
                </li>
     
              </ul>
            `;
    },
  },
  legend: {
    show: false,
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    show: false,
  },
};
//行业颜色
let industryColor = [
  "#f79700",
  "#85c35d",
  "#3c51b3",
  "#b12927",
  "#cd4183",
  "#b87bff",
  "#fbd548",
  "#45cdeb",
];
colorHandler(industryData, industryColor);
//行业配置
const industryOption = {
  series: [
    {
      type: "pie",
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      center: ["20%", "50%"],

      labelLine: {
        show: false,
      },
      data: industryData,
      radius: ["40%", "70%"],
    },
  ],
};
//薪资颜色
let salaryColor = ["#3fb3bd", "#d36b74", "#56a9f3", "#7298f6"];
colorHandler(salaryData, salaryColor);
colorHandler(employData, salaryColor);
const salaryOptions = {
  legend: {
    data: salaryData,
  },

  series: [
    {
      type: "pie",
      name: "industry",
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      center: ["18%", "50%"],

      labelLine: {
        show: false,
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "14",
          fontWeight: "normal",
          color: "white",
        },
      },
      tooltip: {
        show: false,
      },
      data: employData,
      radius: ["30%", "60%"],
    },
    {
      type: "pie",
      name: "salary",
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      // center: ["20%", "50%"],

      labelLine: {
        show: false,
      },
      data: salaryData,
      radius: ["30%", "60%"],
    },
  ],
};
//性别数据
</script>
<style scoped>
.container {
  height: calc(100% - 70px);
  /* background-color: green; */
  margin-top: 70px;
  .top {
    height: 68%;
  }
  .chartContainer {
    height: 32%;

    display: flex;
    flex-direction: row;
    align-content: space-evenly;
    .left,
    .right {
      width: 49%;

      height: 100%;
    }
    .left {
      margin-right: 1%;
    }
    .right {
      margin-left: 1%;
    }
  }
}
</style>
